---
title: "Bubble Menu"
description: "Showcase of the Bubble Menu component in various configurations."
---

import NodeSelectorSnippet from "/snippets/node-selector.mdx";
import ColorSelectorSnippet from "/snippets/color-selector.mdx";
import LinkSelectorSnippet from "/snippets/link-selector.mdx";
import TextButtonsSnippet from "/snippets/text-buttons.mdx";

<img className='block dark:hidden' src='/images/bubble-light.png' alt='Hero Dark' />
<img className='hidden dark:block' src='/images/bubble-dark.png' alt='Hero Dark' />

We first have to create the selectors for the different types of nodes and links. We can then use these selectors to create the bubble menu.

<AccordionGroup>
  <Accordion title='Node Selector' icon='share-nodes'>
    <NodeSelectorSnippet />
  </Accordion>
  <Accordion title='Link Selector' icon='link'>
    <LinkSelectorSnippet />
  </Accordion>
  <Accordion title='Text Buttons' icon='bold'>
    <TextButtonsSnippet />
  </Accordion>
  <Accordion title='Color Selector' icon='palette'>
    <ColorSelectorSnippet />
  </Accordion>
</AccordionGroup>

```tsx editor.tsx
import { NodeSelector } from "./selectors/node-selector";
import { LinkSelector } from "./selectors/link-selector";
import { ColorSelector } from "./selectors/color-selector";
import { TextButtons } from "./selectors/text-buttons";


...
<EditorContent>
  <EditorBubble
    tippyOptions={{
      placement: openAI ? "bottom-start" : "top",
    }}
    className='flex w-fit max-w-[90vw] overflow-hidden rounded border border-muted bg-background shadow-xl'>
      <NodeSelector open={openNode} onOpenChange={setOpenNode} />
      <LinkSelector open={openLink} onOpenChange={setOpenLink} />
      <TextButtons />
      <ColorSelector open={openColor} onOpenChange={setOpenColor} />
  </EditorBubble>
</EditorContent>;
...
```
